Visualization in Software

Prelude

Jonathan Llovet

  • Software Engineer, Linguist, Philosopher

jllovet.com

Jonathan Llovet

School

  • BA from St. John’s College, studied Philosophy and History of Math and Science
  • Enrolled in MS in CS at Towson University
  • Summer Language School in Hebrew at Middlebury University
  • Coursework at Indiana Univ. East in Math
  • Other language programs - classical and modern

jllovet.com

Jonathan Llovet

Work

  • Solutions Architect and Cybersecurity Manager at Inspire Brands
  • Founder and CEO of Opening Questions, where I’m building a language learning app for Ancient Greek called Talk with Albert
  • Formerly worked as a consultant in Identity and Access Management
  • Writing a book on Philosophy of Computer Science: Algorithmics - The Being of Becoming

jllovet.com

Why Talk About Visualization?

What is Computation?

Application of Algorithmics

  • Study of change and becoming, sister of calculus
  • Transformation of initial state to a subsequent state
  • Sometimes with side effects

Modeling and Analogy

  • Exploration (Questions & Discussions)
  • Instrumentalization (Means to an End)
  • Commodification (Product)

At their core:

  • Communication and Collaboration

We should be concerned with:

  • Rhetoric
  • Effective Presentation

Our Audiences

  • The Computer
  • Other Software Engineers
  • Colleagues
  • Customers
  • Ourselves

Effective Communication

  • Fundamental aspects of our cognition:
    • Space and Time

  • Frame communication around these

    • Allow audience to explore concepts spatially
    • Tell a story

Enter, Graphviz

Hello, Graphviz!

digraph g {
  a -> b
}

g a a b b a->b

  • Declarative graph-generation
  • Plain text files ending in .dot
  • Processed by CLI or another tool

Hello, Graphviz!

digraph g {
  rankdir=LR
  a -> b
}

g a a b b a->b

  • Easy modification and iteration
  • Effective for collaboration
  • VSCode Plugin for live updates

Graphviz Resources

Basic Usage

mygraph.dot

digraph g {
  a -> b
}

Generate a PNG

dot -Tpng mygraph.dot -o mygraph.png

Scale the PNG

dot -Tpng mygraph.dot -s=10 -o mygraph.png

Export to SVG

dot -Tsvg mygraph.dot -o mygraph.svg

Nodes

digraph g {
  rankdir=LR
  // default label is variable name
  seed // default shape is ellipse
  flower [label="Rose"]
  acorn [label="Acorn" shape="square"]
  tree [label="Tree" shape="rectangle"]
  forest [label="Forest" shape="circle"]
}

g seed seed flower Rose acorn Acorn tree Tree forest Forest

Edges

digraph g {
  client [label="client"]
  load_balancer [label="load\nbalancer"]
  server [label="server"]
  db [shape="cylinder" label="db"]
  files [shape="folder" label="file\nbucket"]

  client -> load_balancer [label="request"]
  load_balancer -> server [label="route"]
  server -> {
    files
    db
  } [label="request"]
}

g client client load_balancer load balancer client->load_balancer request server server load_balancer->server route db db server->db request files file bucket server->files request

Subgraphs

digraph g {
  rankdir=LR
  subgraph cluster_unary_functions {
    label="Unary Functions"
    negation [label="Negation"]
    identity [label="Identity"]
  }
  subgraph cluster_binary_functions {
    label="Binary Functions"
    and [label="And"]
    or [label="Or"]
  }
}

g cluster_unary_functions Unary Functions cluster_binary_functions Binary Functions negation Negation identity Identity and And or Or

A Reprise on Rhetoric and Storytelling

  • Use analogies from reading
  • Weak form of Sapir Whorf
  • Majority of world languages
    • (notable exceptions: Hebrew, Arabic)

Structure Narrative

  • Left-to-Right
  • Top-to-Bottom
  • Clockwise

Styling

Challenges Presented by Styling

  • Analogous to CSS
  • No built-in variable support

CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

SCSS

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Source: SCSS Documentation

React Native

import React from 'react';
import {StyleSheet, Text} from 'react-native';
import {
  SafeAreaView,
  SafeAreaProvider
} from 'react-native-safe-area-context';

const App = () => (
  <SafeAreaProvider>
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>React Native</Text>
    </SafeAreaView>
  </SafeAreaProvider>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: '#eaeaea',
  },
  title: {
    marginTop: 16,
    paddingVertical: 8,
    borderWidth: 4,
    borderColor: '#20232a',
    borderRadius: 6,
    backgroundColor: '#61dafb',
    color: '#20232a',
    textAlign: 'center',
    fontSize: 30,
    fontWeight: 'bold',
  },
});

export default App;

Source: React Native Docs - Stylesheet

Possible Solutions

IDE Snippets

VSCode Open Configure Snippets

VSCode Open Snippets File

VSCode Snippet Graph Template

VSCode Snippet Cluster Colors

Preprocessors

  • Write a script in a lightweight language like
    • Bash
    • Perl
    • Python

More Robust Solutions

  • Wrappers in other languages
    • Python
    • Go
    • Javascript

Uses and Integration with Tools

  • Read from DB to Dynamically Generate Graphs
  • Integrate into documentation
  • Real-time collaboration

Add to

  • READMEs
  • Plain-Text Knowledge Management Systems

Obsidian

  • Knowledge management system built-around plain-text
  • Uses text processing of markdown files
  • https://obsidian.md/

Obsidian Inline Graphviz

Obsidian Community Plugins - Graphviz

Obsidian Graph View

Obsidian Graph View - Filtered to Tag

Other Visualizations

Enter, Mermaid

Hello, Mermaid

  • Other visualization tasks
  • Frequent native support in Markdown tools
  • Different rendering style, implications for complicated graphs

Example: Sequence Diagrams

  • Sequence diagrams

Obsidian Inline Mermaid